<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div :style="{fontSize:postFontSize+'em'}" id="app" >
        <blog v-for="post in posts":key="post.id":post="post" v-on:enlarge-text="postFontSize += 0.1"></blog>
        
    </div>


    <script src="https://cdn.delivr.net/npm/vue/dist/vue.js"></script>
    <script>
            Vue.component('blog',{
                props:['post'],
                template:`<div >
                            <h2>{{post.title}}</h2>
                            <div v-html="post.content"></div>
                            <button v-on:click="$emit('enlarge-text')">Enlarge text</button>
                        </div>
                        
                `
            })

            new Vue({
                el:'#app',
                data:{
                    posts:[
                        {id:1,title:'标题1',content:'<p><span style="color: aqua;">发生什么事了？</span></p>'},
                        {id:2,title:'标题2',content:'<p><span style="color: aqua;">发生什么事了？</span></p>'},
                        {id:3,title:'标题3',content:'<p><span style="color: aqua;">发生什么事了？</span></p>'},
                        {id:4,title:'标题4',content:'<p><span style="color: aqua;">发生什么事了？</span></p>'}
                    ],
                    postFontSize:1
                },

            })
    </script>
</body>
</html>